

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/HexoPage/img/favicon.jpeg">
  <link rel="icon" href="/HexoPage/img/favicon.jpeg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="xiaoaodi">
  <meta name="keywords" content="">
  
    <meta name="description" content="JavaScript学习笔记（第二部分）总共四部分4 对象(Object)字符串String、数值Number、布尔值Boolean、空值Null、未定义Undefined是基本的数据类型，这些数据都是单一的值，之间是不存在关联的。 对象(Object)是js中的引用数据类型,对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性使用typeof检查一个对象时，会返回object 1234">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript学习笔记（第二部分）总共四部分">
<meta property="og:url" content="http://xiao_aodi.gitee.io/hexopage/2022/03/18/js%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%E7%9A%84%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="~吃椰子灰的胖丁">
<meta property="og:description" content="JavaScript学习笔记（第二部分）总共四部分4 对象(Object)字符串String、数值Number、布尔值Boolean、空值Null、未定义Undefined是基本的数据类型，这些数据都是单一的值，之间是不存在关联的。 对象(Object)是js中的引用数据类型,对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性使用typeof检查一个对象时，会返回object 1234">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-03-18T14:30:00.000Z">
<meta property="article:modified_time" content="2022-03-18T15:46:24.945Z">
<meta property="article:author" content="xiaoaodi">
<meta name="twitter:card" content="summary_large_image">
  
  
  <title>JavaScript学习笔记（第二部分）总共四部分 - ~吃椰子灰的胖丁</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/HexoPage/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"xiao_aodi.gitee.io","root":"/HexoPage/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/HexoPage/local-search.xml"};
  </script>
  <script  src="/HexoPage/js/utils.js" ></script>
  <script  src="/HexoPage/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/HexoPage/">
      <strong>Xiao_aodi</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>
   
      <!-- 天气网 -->
      


    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/HexoPage/img/wallhaven-wqve97.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript学习笔记（第二部分）总共四部分">
              
            </span>
            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      xiaoaodi
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-03-18 22:30" pubdate>
        2022年3月18日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      22k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      184 分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript学习笔记（第二部分）总共四部分</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2022年3月18日 晚上
                
              </p>
            
            <div class="markdown-body">
              <h2 id="JavaScript学习笔记（第二部分）总共四部分"><a href="#JavaScript学习笔记（第二部分）总共四部分" class="headerlink" title="JavaScript学习笔记（第二部分）总共四部分"></a>JavaScript学习笔记（第二部分）总共四部分</h2><h3 id="4-对象-Object"><a href="#4-对象-Object" class="headerlink" title="4 对象(Object)"></a>4 对象(Object)</h3><p>字符串String、数值Number、布尔值Boolean、空值Null、未定义Undefined是基本的数据类型，这些数据都是单一的值，之间是不存在关联的。</p>
<p>对象(Object)是js中的引用数据类型,<strong>对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性</strong><br>使用typeof检查一个对象时，会返回object</p>
<figure class="highlight html"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 新建一个对象用new关键字</span></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);   <span class="hljs-comment">//Object</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj); <span class="hljs-comment">//object</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-1-对象的分类"><a href="#4-1-对象的分类" class="headerlink" title="4.1 对象的分类"></a>4.1 对象的分类</h4><ol>
<li><p>内建对象<br>- 由ES标准中定义的对象，在任何的ES的实现中都可以使用<br>- 比如：Math String Number Boolean Function Object….</p>
</li>
<li><p>宿主对象<br>- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象<br>- 比如 BOM DOM</p>
</li>
<li><p>自定义对象</p>
<p>由开发人员自定义的对象</p>
</li>
</ol>
<p>介绍创建对象的两种方式：</p>
<p>方式一：使用new关键字</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">       obj.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;张三&quot;</span>;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span>); <span class="hljs-comment">//张三</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>方式二：使用{}</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;张三&quot;</span>&#125;;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span>);  <span class="hljs-comment">//张三</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj);<span class="hljs-comment">//object</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>向对象中添加属性的两种方式：</strong></p>
<p>语法1:  对象.属性名 &#x3D; 属性值;</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">       obj.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;张三&quot;</span>;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span>); <span class="hljs-comment">//张三</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>语法2： 对象[“属性名”] &#x3D; 属性值;</strong> &#x2F;&#x2F;这种方式能够使用特殊的属性名   建议使用这一种方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> obj  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">      obj[<span class="hljs-number">213</span>] = <span class="hljs-string">&quot;12313123&amp;^*^#$%#&quot;</span>;</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj[<span class="hljs-number">213</span>]);   <span class="hljs-comment">//12313123&amp;^*^#$%#</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>注意：<strong>对象的属性名没有任何要求，不需要遵守标识符的规范，但是在开发中，尽量按照标识符的要求去写,属性值也可以任意的数据类型。。</strong></p>
<p><strong>读取对象的方式：</strong></p>
<p>语法1：对象.属性名<br>语法2：对象[“属性名”] &#x2F;&#x2F;“属性名”可以使字符串常量，也可以是字符串变量<br>如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">    obj.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;张三&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span>); <span class="hljs-comment">//张三</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj[<span class="hljs-string">&quot;name&quot;</span>]); <span class="hljs-comment">//张三</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj[name]); <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj); <span class="hljs-comment">//object</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>修改对象的属性值：</strong>重新赋值即可    语法：对象.属性名 &#x3D; 新值</p>
<p><strong>删除对象的属性值</strong>：语法： delete  对象加属性名</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">    obj.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;张三&quot;</span>;</span><br><span class="language-javascript">    obj.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;李四&quot;</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span>); <span class="hljs-comment">//李四</span></span><br><span class="language-javascript">    <span class="hljs-keyword">delete</span> obj.<span class="hljs-property">name</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj[<span class="hljs-string">&quot;name&quot;</span>]); <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>注意：对象中的属性值也可以是对象。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">    obj.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;张三&quot;</span>;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj1  = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</span><br><span class="language-javascript">    obj1.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;李四&quot;</span>;</span><br><span class="language-javascript">    obj.<span class="hljs-property">value</span> = obj1;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>); <span class="hljs-comment">//李四</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj.<span class="hljs-property">value</span>); <span class="hljs-comment">//object</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-2-遍历"><a href="#4-2-遍历" class="headerlink" title="4.2 遍历"></a>4.2 遍历</h4><p><strong>使用in检查对象中是否含有指定属性</strong><br>语法：”属性名” in 对象<br>如果在对象中含有该属性，则返回true<br>如果没有则返回false</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;张三&quot;</span>&#125;;</span><br><span class="language-javascript">       <span class="hljs-comment">// 检查obj对象中是否由name属性名</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;name&quot;</span> <span class="hljs-keyword">in</span> obj); <span class="hljs-comment">//true</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;张三&quot;</span>,<span class="hljs-attr">age</span>:<span class="hljs-string">&quot;1231&quot;</span>,<span class="hljs-attr">gander</span>:<span class="hljs-string">&quot;男&quot;</span>&#125;;</span><br><span class="language-javascript">    <span class="hljs-comment">// 检查obj对象中是否由name属性名</span></span><br><span class="language-javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> obj)</span><br><span class="language-javascript">    &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i, <span class="hljs-string">&quot;:&quot;</span>,obj[i]);  <span class="hljs-comment">//name : 张三  //age : 1231  //gander : 男</span></span><br><span class="language-javascript">    &#125; </span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>使用对象字面量，在创建对象时直接向对象中添加属性</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html">var obj = &#123;  <br>    属性名:属性值,  <br>    属性名:属性值,  <br>    属性名:属性值,  <br>    属性名:属性值  <br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>基本数据类型的数据，变量是直接保存的它的值。</strong><br>变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。</p>
<p><strong>引用数据类型的数据，变量是保存的对象的引用（内存地址）。</strong><br>如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。<br>比较两个变量时，对于基本数据类型，比较的就是值，<br>对于引用数据类型比较的是地址，地址相同才相同</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 操作的是同一块内存</span></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;张三&quot;</span>&#125;;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj1 = obj;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj == obj1); <span class="hljs-comment">//true</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">name</span>);<span class="hljs-comment">//张三</span></span><br><span class="language-javascript">    obj1 = <span class="hljs-literal">null</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span>);<span class="hljs-comment">//张三</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="4-3-函数"><a href="#4-3-函数" class="headerlink" title="4.3 函数"></a>4.3 函数</h4><p>函数的本质也是一个对象，函数中可以封装一些功能代码，在需要的时候可以执行这些功能(代码)，函数可以保存一些代码在需要的时候进行调用</p>
<p>创建一个函数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;写的第一个函数&quot;</span>);</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-title function_">fun</span>();<span class="hljs-comment">//调用函数</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> fun); <span class="hljs-comment">//function</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(fun);<span class="hljs-comment">//ƒ fun()&#123; console.log(&quot;写的第一个函数&quot;);     &#125;   </span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>函数的声明格式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html">function 函数名([形参1,形参2...形参N])&#123;  <br>语句...  <br>&#125;<br></code></pre></td></tr></table></figure>

<p>函数的表达式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html">var 函数名 = function([形参1,形参2...形参N])&#123;  <br>语句...  <br>&#125;;<br></code></pre></td></tr></table></figure>

<p>调用函数<br>语法：函数对象([实参1,实参2…实参N]);<br>fun() sum() alert() Number() parseInt()<br>当我们调用函数时，函数中封装的代码会按照编写的顺序执行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> fun = <span class="hljs-keyword">function</span>(<span class="hljs-params">a</span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;执行语句一&quot;</span>);</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;执行语句二&quot;</span>);</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a+<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-comment">//调用函数</span></span><br><span class="language-javascript">       <span class="hljs-title function_">fun</span>(<span class="hljs-number">10</span>);  <span class="hljs-comment">// 执行语句一 执行语句二  10a</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>立即执行函数</strong></p>
<p>函数定义完，立即被调用，这种函数叫做立即执行函数<br>立即执行函数往往只会执行一次</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    (<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;马上被执行&quot;</span>);</span><br><span class="language-javascript">    &#125;)() <span class="hljs-comment">//马上被执行</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>遍历对象</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj =&#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;小飞&quot;</span>,<span class="hljs-attr">age</span>:<span class="hljs-number">18</span>,<span class="hljs-attr">gander</span>:<span class="hljs-string">&quot;男&quot;</span>&#125;</span><br><span class="language-javascript">       <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> obj)</span><br><span class="language-javascript">       &#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;property：name =&quot;</span>+i+<span class="hljs-string">&quot;value=&quot;</span>+obj[i]+<span class="hljs-string">&quot;&lt;br/&gt;&quot;</span> );<span class="hljs-comment">//property：name =namevalue=小飞&lt;br/&gt; /</span></span><br><span class="language-javascript">       &#125;                                                               <span class="hljs-comment">//property：name =agevalue=18&lt;br/&gt;///property：name </span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>形参和实参</strong><br>形参：形式参数<br>定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开<br>定义形参就相当于在函数内声明了对应的变量但是并不赋值，<br>形参会在调用时才赋值。</p>
<p><strong>实参：实际参数</strong><br>调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参,<br>调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。<br><strong>如果实参的数量大于形参，多余实参将不会赋值，</strong><br><strong>如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">         <span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a,b</span>)</span><br><span class="language-javascript">         &#123;</span><br><span class="language-javascript">             <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a+b);</span><br><span class="language-javascript">         &#125;</span><br><span class="language-javascript">         <span class="hljs-title function_">add</span>(); <span class="hljs-comment">//NaN</span></span><br><span class="language-javascript">         <span class="hljs-title function_">add</span>(<span class="hljs-number">10</span>,<span class="hljs-number">20</span>);<span class="hljs-comment">//30</span></span><br><span class="language-javascript">         <span class="hljs-title function_">add</span>(<span class="hljs-string">&quot;adad&quot;</span>,<span class="hljs-string">&quot;你哈&quot;</span>);<span class="hljs-comment">//adad你哈</span></span><br><span class="language-javascript">         <span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>);<span class="hljs-comment">//NaN</span></span><br><span class="language-javascript">         <span class="hljs-title function_">add</span>(<span class="hljs-literal">true</span>,<span class="hljs-literal">false</span>);<span class="hljs-comment">//1</span></span><br><span class="language-javascript">         <span class="hljs-title function_">add</span>(<span class="hljs-number">10</span>,<span class="hljs-number">23</span>,<span class="hljs-number">13</span>,<span class="hljs-number">43</span>,<span class="hljs-number">34</span>);<span class="hljs-comment">//33</span></span><br><span class="language-javascript">     </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>返回值，就是函数执行的结果。</strong><br>使用return 来设置函数的返回值。<br>语法：return 值;<br>该值就会成为函数的返回值，可以通过一个变量来接收返回值<br>return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。<br>return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。<br><strong>如果return后不跟值，或者是不写return则函数默认返回undefined。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">          <span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a,b</span>)</span><br><span class="language-javascript">          &#123;</span><br><span class="language-javascript">              <span class="hljs-keyword">return</span> a+b;</span><br><span class="language-javascript">          &#125;</span><br><span class="language-javascript">          <span class="hljs-keyword">function</span> <span class="hljs-title function_">func</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">          &#123;</span><br><span class="language-javascript">              <span class="hljs-keyword">return</span>;</span><br><span class="language-javascript">              <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;这句话不会再输出了&quot;</span>);</span><br><span class="language-javascript">          &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> sum = <span class="hljs-title function_">add</span>(<span class="hljs-number">10</span>,<span class="hljs-number">20</span>);</span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">func</span>());<span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(sum);<span class="hljs-comment">//30</span></span><br><span class="language-javascript">      </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>参数，函数的实参也可以是任意的数据类型。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;小飞&quot;</span>,<span class="hljs-attr">age</span>:<span class="hljs-number">123</span>&#125;;</span><br><span class="language-javascript">          <span class="hljs-keyword">function</span> <span class="hljs-title function_">input</span>(<span class="hljs-params">obj</span>)</span><br><span class="language-javascript">          &#123;</span><br><span class="language-javascript">              <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">name</span> + <span class="hljs-string">&quot;&quot;</span> + obj.<span class="hljs-property">age</span>);</span><br><span class="language-javascript">              <span class="hljs-keyword">var</span> tar = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>()</span><br><span class="language-javascript">              <span class="hljs-keyword">return</span> tar;</span><br><span class="language-javascript">          &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> tmp = <span class="hljs-title function_">input</span>(obj);<span class="hljs-comment">//小飞123</span></span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> tmp); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(input);<span class="hljs-comment">//输出整个的函数的代码块</span></span><br><span class="language-javascript">      </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>注意：input(obj)表示调用函数 input表示函数对象</p>
<p>可以在函数的内部再声明一个函数，函数也可以作为返回值进行返回，操作其实和对象差不多。</p>
<p><strong>方法（method）</strong><br>可以将一个函数设置为一个对象的属性，<br>当一个对象的属性是一个函数时，<br>我们称这个函数是该对象的方法。<br>对象.方法名();<br>函数名()</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">say</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;我被调用了&quot;</span>);</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;asd&quot;</span>,<span class="hljs-attr">func</span>:say&#125;</span><br><span class="language-javascript">    obj.<span class="hljs-title function_">func</span>();<span class="hljs-comment">//我被调用了</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj.<span class="hljs-property">func</span>); <span class="hljs-comment">// function</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>函数的属性和方法</strong></p>
<p>call()<br>apply()<br><strong>这两个方法都是函数对象的方法需要通过函数对象来调用</strong><br>通过两个方法可以直接调用函数，并且<strong>可以通过第一个实参来指定函数中this</strong><br>不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span> (x, y) </span><br><span class="language-javascript">&#123; </span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span> (x + y);</span><br><span class="language-javascript">&#125; </span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">minus</span> (x, y) </span><br><span class="language-javascript">&#123; </span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span> (x - y); </span><br><span class="language-javascript">&#125; </span><br><span class="language-javascript">add.<span class="hljs-property">call</span> (minus , <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);    <span class="hljs-comment">//2</span></span><br><span class="language-javascript"><span class="hljs-comment">//这个例子中的意思就是用 add 来替换 minus ，add.call(minus ,1,1) == add(1,1) ，所以运行结果为：console.log (2); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。</span></span><br><span class="language-javascript"><span class="hljs-comment">//A.call( B,x,y )：就是把A的函数放到B中运行，x 和 y 是A方法的参数。</span></span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>arguments</strong><br>arguments和this类似，都是函数中的隐含的参数<br>arguments是一个类数组元素，它用来封装函数执行过程中的实参<br>所以即使不定义形参，也可以通过arguments来使用实参<br><strong>arguments中有一个属性callee表示当前执行的函数对象</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">myfunc1</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = <span class="hljs-string">&#x27;Lee&#x27;</span>;</span><br><span class="language-javascript">           <span class="hljs-variable language_">this</span>.<span class="hljs-property">myTxt</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">txt</span>) &#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>( <span class="hljs-string">&#x27;i am&#x27;</span>,txt );</span><br><span class="language-javascript">           &#125;</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">myfunc2</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            myfunc1.<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>);</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> myfunc3 = <span class="hljs-keyword">new</span> <span class="hljs-title function_">myfunc2</span>();</span><br><span class="language-javascript">       myfunc3.<span class="hljs-title function_">myTxt</span>(<span class="hljs-string">&#x27;Geing&#x27;</span>); <span class="hljs-comment">// i am Geing</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span> (myfunc3.<span class="hljs-property">name</span>);	<span class="hljs-comment">// Lee</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>this（调用函数的那个对象）<br>this是函数的上下文对象，根据函数的调用方式不同会执向不同的对象</p>
<ol>
<li>以函数的形式调用时，this是window</li>
<li>以方法的形式调用时，this是调用方法的对象</li>
<li>以构造函数的形式调用时，this是新建的那个对象</li>
<li>使用call和apply调用时，this是指定的那个对象</li>
<li>在全局作用域中this代表window</li>
</ol>
<p><strong>枚举对象中的属性</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj = &#123;name :<span class="hljs-string">&quot;1231&quot;</span>,age :<span class="hljs-number">12</span>&#125;;</span><br><span class="language-javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> obj)</span><br><span class="language-javascript">    &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;水属性名字：&quot;</span> + i);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;属性值:&quot;</span> + obj[i])<span class="hljs-comment">// 水属性名字：name  属性值:1231 水属性名字：age 属性值:12</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-4-作用域"><a href="#4-4-作用域" class="headerlink" title="4.4 作用域"></a>4.4 作用域</h4><p>作用域简单来说就是一个变量的作用范围。<br>在JS中作用域分成两种：</p>
<p><strong>1.全局作用域</strong></p>
<p>直接在script标签中编写的代码都运行在全局作用域中<br><strong>全局作用域在打开页面时创建，在页面关闭时销毁。</strong></p>
<p>全局作用域中有一个全局对象window，window对象由浏览器提供，<br>可以在页面中直接使用，它代表的是整个的浏览器的窗口。</p>
<p><strong>在全局作用域中创建的变量都会作为window对象的属性保存</strong><br>在全局作用域中创建的函数都会作为window对象的方法保存<br>在全局作用域中创建的变量和函数可以在页面的任意位置访问。</p>
<p>在函数作用域中也可以访问到全局作用域的变量。<br>尽量不要在全局中创建变量</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       a = <span class="hljs-number">123</span>; <span class="hljs-comment">//a是对象window的属性成员</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">a</span>);  <span class="hljs-comment">// 123</span></span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">func</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;我被调用了&quot;</span>);</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">func</span>(); <span class="hljs-comment">//我被调用了</span></span><br><span class="language-javascript">       <span class="hljs-comment">//变量的提前声明</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(sum); <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> sum = <span class="hljs-number">100</span>;</span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>2.函数作用域</p>
<p>函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。<br>函数作用域在函数执行时创建，在函数执行结束时销毁。<br>在函数作用域中创建的变量，不能在全局中访问。<br>当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，<br>如果找到了则直接使用，如果没有找到则到上一级作用域中寻找，<br>如果找到了则使用，找不到则继续向上找，一直会</p>
<p><strong>变量的声明提前</strong><br>在全局作用域中，使用<strong>var关键字声明的变量会在所有的代码执行之前被声明，但是不会赋值。</strong><br>所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。<br>在函数作用域中，也具有该特性，使用var关键字声明的变量会在函数所有的代码执行前被声明，<br>如果没有使用var关键字声明变量，则变量会变成全局变量</p>
<p><strong>函数的声明提前</strong><br>在全局作用域中，使用<strong>函数声明创建的函数（function fun(){}）,会在所有的代码执行之前被创建</strong>，<br>也就是我们可以在函数声明前去调用函数，但是使用函数表达式(var fun &#x3D; function(){})创建的函数没有该特性<br>在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建好了。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">func1</span>();</span><br><span class="language-javascript">    <span class="hljs-comment">// window.func2(); error</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 函数的提前声明</span></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span>  <span class="hljs-title function_">func1</span>(<span class="hljs-params"></span>)&#123;  <span class="hljs-comment">//提前被创建</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;函数提前声明了&quot;</span>);</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> func2= <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  <span class="hljs-comment">//不会提前被创建</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;函数没有提前声明了&quot;</span>);</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html">	<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> c= <span class="hljs-number">100</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">func1</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(c);</span><br><span class="language-javascript">           <span class="hljs-keyword">var</span> c= <span class="hljs-number">200</span>;</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-title function_">func1</span>();  <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>	 <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> c= <span class="hljs-number">100</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">func1</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(c);</span><br><span class="language-javascript">           c= <span class="hljs-number">200</span>;  <span class="hljs-comment">//没有使用var关键字就会默认用全局的变量 </span></span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-title function_">func1</span>();  <span class="hljs-comment">//100</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(c); <span class="hljs-comment">//200</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-comment">// 定义了形参就相当于声明了变量</span></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> c= <span class="hljs-number">100</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">func1</span>(<span class="hljs-params">c</span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(c);</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-title function_">func1</span>();  <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">       <span class="hljs-title function_">func1</span>(<span class="hljs-number">10</span>) <span class="hljs-comment">//10</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>练习</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">        &#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(a); </span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-title function_">fun</span>(); <span class="hljs-comment">//123 </span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br>     <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">        &#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(a); </span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> a = <span class="hljs-number">2313</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-title function_">fun</span>(); <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">        <span class="hljs-title function_">alert</span>(a);<span class="hljs-comment">//123</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br>       <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">        &#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(a);</span><br><span class="language-javascript">            a = <span class="hljs-number">2313</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-title function_">fun</span>(); <span class="hljs-comment">//123 </span></span><br><span class="language-javascript">        <span class="hljs-title function_">alert</span>(a); <span class="hljs-comment">//2313</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params">a</span>)</span><br><span class="language-javascript">        &#123;</span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(a);</span><br><span class="language-javascript">            a = <span class="hljs-number">2313</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-title function_">fun</span>(<span class="hljs-number">1234</span>); <span class="hljs-comment">//1234</span></span><br><span class="language-javascript">        <span class="hljs-title function_">alert</span>(a);<span class="hljs-comment">//2313</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-5-this（上下文对象）"><a href="#4-5-this（上下文对象）" class="headerlink" title="4.5 this（上下文对象）"></a>4.5 this（上下文对象）</h4><p>我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。<br>使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。</p>
<p>指向当前对象</p>
<p>this的不同的情况：<br>1.以函数的形式调用时，this是window<br>2.以方法的形式调用时，this就是调用方法的对象<br>3.以构造函数的形式调用时，this就是新创建的对象</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> a =<span class="hljs-number">10</span>;</span><br><span class="language-javascript">      <span class="hljs-keyword">function</span> <span class="hljs-title function_">func</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">a</span>);</span><br><span class="language-javascript">      &#125;</span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> obj =&#123; <span class="hljs-attr">a</span>:<span class="hljs-number">10233</span>,<span class="hljs-attr">fun</span>:func &#125;</span><br><span class="language-javascript">      obj.<span class="hljs-title function_">fun</span>();  <span class="hljs-comment">//10</span></span><br><span class="language-javascript">      <span class="hljs-title function_">func</span>();     <span class="hljs-comment">//10233</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">           <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;小红&quot;</span>;</span><br><span class="language-javascript">          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>); </span><br><span class="language-javascript">      &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> human = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>();<span class="hljs-comment">//小红</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="4-6-构造函数"><a href="#4-6-构造函数" class="headerlink" title="4.6 构造函数"></a>4.6 构造函数</h4><p>构造函数是专门用来创建对象的函数<br><strong>一个构造函数我们也可以称为一个类</strong><br>通过一个构造函数创建的对象，我们称该对象时这个构造函数的实例<br>通过同一个构造函数创建的对象，我们称为一类对象<br>构造函数就是一个普通的函数，只是他的调用方式不同，<br>如果直接调用，它就是一个普通函数<br>如果使用new来调用，则它就是一个构造函数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj = &#123;</span><br><span class="language-javascript">           <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;小飞&quot;</span>,</span><br><span class="language-javascript">           <span class="hljs-attr">age</span>:<span class="hljs-number">124</span>,</span><br><span class="language-javascript">           <span class="hljs-attr">gander</span>:<span class="hljs-string">&quot;男&quot;</span>,</span><br><span class="language-javascript">           <span class="hljs-attr">func</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">               <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);</span><br><span class="language-javascript">           &#125;</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       obj.<span class="hljs-title function_">func</span>();<span class="hljs-comment">//小飞</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;小红&quot;</span>;</span><br><span class="language-javascript">           <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>); </span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> human = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(); <span class="hljs-comment">//小红</span></span><br><span class="language-javascript">       <span class="hljs-comment">//human 是Person对象的实例</span></span><br><span class="language-javascript">       <span class="hljs-title class_">Person</span>();<span class="hljs-comment">//小红</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name , age , gender</span>)&#123;  </span><br><span class="language-javascript">          <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;  </span><br><span class="language-javascript">          <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;  </span><br><span class="language-javascript">          <span class="hljs-variable language_">this</span>.<span class="hljs-property">gender</span> = gender;  </span><br><span class="language-javascript">          <span class="hljs-variable language_">this</span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  </span><br><span class="language-javascript">              <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);  </span><br><span class="language-javascript">          &#125;;  </span><br><span class="language-javascript">      &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> human = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;XIAOHONG &quot;</span>,<span class="hljs-number">18</span>,<span class="hljs-string">&quot;NAN&quot;</span>);</span><br><span class="language-javascript">      human.<span class="hljs-title function_">func</span>();</span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>构造函数的执行流程：</p>
<ol>
<li>创建一个新的对象</li>
<li>将新的对象作为函数的上下文对象（this）</li>
<li>执行函数中的代码</li>
<li>将新建的对象返回</li>
</ol>
<p><strong>instanceof 用来检查一个对象是否是一个类的实例</strong><br>语法：对象 instanceof 构造函数<br>如果该对象时构造函数的实例，则返回true，否则返回false<br><strong>Object是所有对象的祖先，所以任何对象和Object做instanceof都会返回true</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name , age , gender</span>)&#123;  </span><br><span class="language-javascript">        <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;  </span><br><span class="language-javascript">        <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;  </span><br><span class="language-javascript">        <span class="hljs-variable language_">this</span>.<span class="hljs-property">gender</span> = gender;  </span><br><span class="language-javascript">        <span class="hljs-variable language_">this</span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  </span><br><span class="language-javascript">            <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);  </span><br><span class="language-javascript">        &#125;;  </span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> human1 =<span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;XIAOHONG &quot;</span>,<span class="hljs-number">18</span>,<span class="hljs-string">&quot;NAN&quot;</span>);</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(human1 <span class="hljs-keyword">instanceof</span> <span class="hljs-title class_">Person</span>); <span class="hljs-comment">//true</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>工厂方法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">          <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name , age , gender</span>)&#123;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">gender</span> = gender;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  </span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);  </span><br><span class="language-javascript">            &#125;;  </span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">Zoom</span>(<span class="hljs-params">name , age , gender</span>)&#123;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">gender</span> = gender;  </span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  </span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);  </span><br><span class="language-javascript">            &#125;;  </span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">         <span class="hljs-keyword">function</span> <span class="hljs-title function_">factroyCreate</span>(<span class="hljs-params">func,name , age , gender</span>)&#123;  </span><br><span class="language-javascript">             <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title function_">func</span>(name , age , gender);</span><br><span class="language-javascript">             <span class="hljs-keyword">return</span> obj;</span><br><span class="language-javascript">         &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">         <span class="hljs-keyword">var</span> obj_1 = <span class="hljs-title function_">factroyCreate</span>(<span class="hljs-title class_">Person</span>,<span class="hljs-string">&quot;小红&quot;</span>,<span class="hljs-number">19</span>,<span class="hljs-string">&quot;男&quot;</span>);</span><br><span class="language-javascript">         <span class="hljs-keyword">var</span> obj_2 = <span class="hljs-title function_">factroyCreate</span>(<span class="hljs-title class_">Person</span>,<span class="hljs-string">&quot;小马&quot;</span>,<span class="hljs-number">19</span>,<span class="hljs-string">&quot;男&quot;</span>);</span><br><span class="language-javascript">         <span class="hljs-keyword">var</span> obj_3 = <span class="hljs-title function_">factroyCreate</span>(<span class="hljs-title class_">Zoom</span>,<span class="hljs-string">&quot;狗&quot;</span>,<span class="hljs-number">3</span>,<span class="hljs-string">&quot;雄&quot;</span>);</span><br><span class="language-javascript">         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj_1); <span class="hljs-comment">//Person</span></span><br><span class="language-javascript">         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj_2); <span class="hljs-comment">//Person</span></span><br><span class="language-javascript">         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj_3); <span class="hljs-comment">//Zoom</span></span><br><span class="language-javascript">        </span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们发现每次创建新的对象的时候就会创建一个新的放啊，执行一万次就有一万个新的方法，但是这些方法是相同的，浪费了内存。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">		<span class="hljs-comment">//我们发现这些方法不是公用的</span></span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name ,age , gander</span>)</span><br><span class="language-javascript">        &#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> =age;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">gander</span> = gander;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">func</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;小黑&quot;</span>,<span class="hljs-number">13</span>,<span class="hljs-number">1</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> obj1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;小红&quot;</span>,<span class="hljs-number">12</span>,<span class="hljs-number">0</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">func</span> == obj.<span class="hljs-property">func</span>); <span class="hljs-comment">//false</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">		<span class="hljs-comment">//改进版本将函数声明成全局的函数，但是这样也不合理，多人开发会有相同的命名情况等等</span></span><br><span class="language-javascript">    	<span class="hljs-comment">//原型模式很好的解决了这个问题</span></span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name ,age , gander</span>)</span><br><span class="language-javascript">        &#123;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> =age;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">gander</span> = gander;</span><br><span class="language-javascript">            <span class="hljs-variable language_">this</span>.<span class="hljs-property">func</span> =fun; </span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        </span><br><span class="language-javascript">		<span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;小黑&quot;</span>,<span class="hljs-number">13</span>,<span class="hljs-number">1</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> obj1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;小红&quot;</span>,<span class="hljs-number">12</span>,<span class="hljs-number">0</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">func</span> == obj.<span class="hljs-property">func</span>); <span class="hljs-comment">//false</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-7-原型对象-prototype）"><a href="#4-7-原型对象-prototype）" class="headerlink" title="4.7 原型对象(prototype）"></a>4.7 原型对象(prototype）</h4><p>创建一个函数以后，<strong>解析器都会默认在函数中添加一个数prototype</strong><br>prototype属性指向的是一个对象，这个对象我们称为原型对象。<br>当函数作为构造函数使用，<strong>它所创建的对象中都会有一个隐含的属性执行该原型对象。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html">//这个隐含的属性可以通过对象.__proto__来访问<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">function</span> <span class="hljs-title function_">fun</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">     &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">function</span> <span class="hljs-title function_">MyClass</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">     &#125;</span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">__proto__</span>);  <span class="hljs-comment">//Object</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> obj.<span class="hljs-property">__proto__</span>) <span class="hljs-comment">//object</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(fun.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>);  <span class="hljs-comment">//Object</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> fun.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>) <span class="hljs-comment">//object</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p> 原型的空间是改对象和实例所共享的内存块：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">function</span> <span class="hljs-title function_">MyClass</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-title class_">MyClass</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">a</span> = <span class="hljs-number">120</span>;</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> obj1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">__proto__</span>.<span class="hljs-property">a</span>);  <span class="hljs-comment">//120</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">__proto__</span>.<span class="hljs-property">a</span>) <span class="hljs-comment">//120</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。</strong><br>我们可以将对象中共有的属性和方法统一添加到原型对象中，<br>这样我们只需要添加一次，就可以使所有的对象都可以使用。</p>
<p>当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，<br>如果在自身中找到了，则直接使用。<br>如果没有找到，则去原型对象中寻找，如果找到了则使用，<br><strong>如果没有找到，则去原型的原型中寻找，</strong>依此类推。直到找到Object的原型为止，Object的原型的原型为null，</p>
<p>如果依然没有找到则返回undefined。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">MyClass</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-title class_">MyClass</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">a</span> = <span class="hljs-number">120</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">        obj.<span class="hljs-property">a</span> = <span class="hljs-number">1000</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> obj1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">a</span>);  <span class="hljs-comment">//1000</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">a</span>) <span class="hljs-comment">//120</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">b</span>) <span class="hljs-comment">//undefined</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<p><strong>hasOwnProperty()</strong><br>这个方法可以用来检查<strong>对象自身中</strong>是否含有某个属性<br>语法：对象.hasOwnProperty(“属性名”)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">function</span> <span class="hljs-title function_">MyClass</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript"></span><br><span class="language-javascript">     &#125;</span><br><span class="language-javascript">     <span class="hljs-title class_">MyClass</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">a</span> = <span class="hljs-number">120</span>;</span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">     obj.<span class="hljs-property">a</span> = <span class="hljs-number">1000</span>;</span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> obj1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MyClass</span>();</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-title function_">hasOwnProperty</span>(<span class="hljs-string">&quot;a&quot;</span>));  <span class="hljs-comment">//true</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-title function_">hasOwnProperty</span>(<span class="hljs-string">&quot;a&quot;</span>)) <span class="hljs-comment">//false</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;obj&quot;</span> <span class="hljs-keyword">in</span> <span class="hljs-title class_">MyClass</span>);<span class="hljs-comment">//false</span></span><br><span class="language-javascript">     <span class="hljs-comment">// hasOwnProperty这是函数在原型的原型中</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">__proto__</span>.<span class="hljs-title function_">hasOwnProperty</span>(<span class="hljs-string">&quot;hasOwnProperty&quot;</span>));<span class="hljs-comment">//false</span></span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">__proto__</span>.<span class="hljs-property">__proto__</span>.<span class="hljs-title function_">hasOwnProperty</span>(<span class="hljs-string">&quot;hasOwnProperty&quot;</span>));<span class="hljs-comment">//true</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-8-toString方法"><a href="#4-8-toString方法" class="headerlink" title="4.8 toString方法"></a>4.8 toString方法</h4><p>当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值</p>
<p>如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name , age , gender</span>)&#123;  </span><br><span class="language-javascript">         <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;  </span><br><span class="language-javascript">         <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;  </span><br><span class="language-javascript">         <span class="hljs-variable language_">this</span>.<span class="hljs-property">gender</span> = gender;  </span><br><span class="language-javascript">         <span class="hljs-variable language_">this</span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  </span><br><span class="language-javascript">             <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);  </span><br><span class="language-javascript">         &#125;;  </span><br><span class="language-javascript">     &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-title class_">Person</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">toString</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;  </span><br><span class="language-javascript">         <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Person[name=&quot;</span>+<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>+<span class="hljs-string">&quot;,age=&quot;</span>+<span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span>+<span class="hljs-string">&quot;,gender=&quot;</span>+<span class="hljs-variable language_">this</span>.<span class="hljs-property">gender</span>+<span class="hljs-string">&quot;]&quot;</span>;  </span><br><span class="language-javascript">     &#125;;</span><br><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;小工&quot;</span>,<span class="hljs-number">15</span>,<span class="hljs-string">&quot;男&quot;</span>);</span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> obj1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&quot;小宏&quot;</span>,<span class="hljs-number">15</span>,<span class="hljs-string">&quot;男&quot;</span>);</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-title function_">toString</span>());</span><br><span class="language-javascript">     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-title function_">toString</span>());</span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-9-垃圾回收"><a href="#4-9-垃圾回收" class="headerlink" title="4.9 垃圾回收"></a>4.9 垃圾回收</h4><p>就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾<br>这些垃圾积攒过多以后，会导致程序运行的速度过慢，<br>所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾<br>当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，<br>此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，<br>所以这种垃圾必须进行清理。<br>在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，<br>我们不需要也不能进行垃圾回收的操作<br>我们需要做的只是要将不再使用的对象设置null即可</p>
<p>概括：就是当我们没有实例去操作那块内存了，这个垃圾对象就被回收了。</p>
<h3 id="5-数组"><a href="#5-数组" class="headerlink" title="5 数组"></a>5 数组</h3><h4 id="5-1数组的操作"><a href="#5-1数组的操作" class="headerlink" title="5.1数组的操作"></a>5.1数组的操作</h4><p>数组其实也是一个对象，它和我们的普通的对象的功能类似，用来存储一些值得，不同得是属性名，数组使用索引来操作元素，数组的索引是从零开始得，</p>
<p>数组得存储性能要比常规得对象要好，我们在开发中会经常得使用到。</p>
<p>创建数组的两种方式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> arr =<span class="hljs-keyword">new</span> <span class="hljs-title class_">Array</span>(<span class="hljs-number">1</span>,<span class="hljs-number">123</span>,<span class="hljs-number">43</span>);</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);  <span class="hljs-comment">//1,123,43依次输出</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> arr); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>,<span class="hljs-number">122</span>,<span class="hljs-number">1231</span>];</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<span class="hljs-comment">//10,122,1231依次输出</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> arr); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>向数组中添加元素语法：数组对象[索引] &#x3D; 值; 或者调用push方法，每次向最后添加一个元素，</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> arr = [];</span><br><span class="language-javascript">    arr[<span class="hljs-number">0</span>] =<span class="hljs-number">10</span>;</span><br><span class="language-javascript">    arr.<span class="hljs-title function_">push</span>(<span class="hljs-number">100</span>);</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);  <span class="hljs-comment">// 10 100</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>创建数组时直接添加元素语法：var arr &#x3D; [元素1,元素2….元素N];</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>,<span class="hljs-number">122</span>,<span class="hljs-number">1231</span>];</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<span class="hljs-comment">//10,122,1231依次输出</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> arr); <span class="hljs-comment">//object</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>读取数组中得元素如果不存在直接返回undefined;</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>,<span class="hljs-number">122</span>,<span class="hljs-number">1231</span>];</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr[<span class="hljs-number">10</span>]);<span class="hljs-comment">//undefined</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>获取和修改数组的长度<br>使用length属性来操作数组的长度<br>获取长度：数组.length<br>length获取到的是数组的最大索引+1<br>对于连续的数组，length获取到的就是数组中元素的个数<br>修改数组的长度<br>数组.length &#x3D; 新长度</p>
<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><br>&lt;script&gt;<br>    <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>,<span class="hljs-number">122</span>,<span class="hljs-number">1231</span>];<br>    <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(arr.<span class="hljs-built_in">length</span>);<span class="hljs-comment">//3</span><br><br>    arr[<span class="hljs-number">32</span>] = <span class="hljs-number">20</span>;<br>    <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(arr.<span class="hljs-built_in">length</span>);<span class="hljs-comment">//33</span><br><br>    arr.<span class="hljs-built_in">length</span> =<span class="hljs-number">1</span>;<br>    <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(arr); <span class="hljs-comment">//只有一个元素了 10</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>如果修改后的length大于原长度，则多出的部分会空出来<br>如果修改后的length小于原长度，则原数组中多出的元素会被删除<br>向数组的最后添加元素：数组[数组.length] &#x3D; 值;</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>,<span class="hljs-number">122</span>,<span class="hljs-number">1231</span>];</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);   <span class="hljs-comment">//10,122,1231</span></span><br><span class="language-javascript">    arr[arr.<span class="hljs-property">length</span>] = <span class="hljs-number">10</span>;</span><br><span class="language-javascript">    arr[arr.<span class="hljs-property">length</span>] = <span class="hljs-number">10234</span>;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr.<span class="hljs-property">length</span>);<span class="hljs-comment">//5</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);   <span class="hljs-comment">//10,122,1231 10 10234</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// arr.length =1;  // 改变了元素组得值</span></span><br><span class="language-javascript">    <span class="hljs-comment">// console.log(arr); //只有一个元素了 10</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>创建一个数组长度为10的代码如下：</p>
<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs arcade">&lt;script&gt;<br>    <span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">10</span>);<br>    <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(arr.<span class="hljs-built_in">length</span>);  <span class="hljs-comment">//10 </span><br>    <span class="hljs-keyword">var</span> arr1 = [<span class="hljs-number">10</span>];<br>    <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(arr1.<span class="hljs-built_in">length</span>); <span class="hljs-comment">//1</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>注意：数组里面存放的数据类型可以是任意的，可以是函数、对象、基本类型。</p>
<h4 id="5-2-数组的方法"><a href="#5-2-数组的方法" class="headerlink" title="5.2 数组的方法"></a>5.2 数组的方法</h4><table>
<thead>
<tr>
<th align="left">functionName</th>
<th align="left">function</th>
<th align="left">usage</th>
</tr>
</thead>
<tbody><tr>
<td align="left">push()</td>
<td align="left">用来向数组的末尾添加一个或多个元素，并返回数组新的长度</td>
<td align="left">语法：数组.push(元素1,元素2,元素N)pop()</td>
</tr>
<tr>
<td align="left">pop()</td>
<td align="left">用来删除数组的最后一个元素，并返回被删除的元素</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">unshift()</td>
<td align="left">向数组的开头添加一个或多个元素，并返回数组的新的长度</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">shift()</td>
<td align="left">删除数组的开头的一个元素，并返回被删除的元素</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">reverse()</td>
<td align="left">可以用来反转一个数组，它会对原数组产生影响</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">concat()</td>
<td align="left">可以连接两个或多个数组，它不会影响原数组，而是新数组作为返回值返回</td>
<td align="left"></td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html">//push()方法的测试<br>	<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr.<span class="hljs-property">length</span>);  <span class="hljs-comment">//4</span></span><br><span class="language-javascript">        arr.<span class="hljs-title function_">push</span>(<span class="hljs-number">2420</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr.<span class="hljs-property">length</span>);  <span class="hljs-comment">//5</span></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">push</span>(<span class="hljs-number">2420</span>,<span class="hljs-string">&quot;dadad&quot;</span>,<span class="hljs-literal">undefined</span>,<span class="hljs-literal">false</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//9</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html">//pop()方法的测试<br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];</span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">pop</span>();</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);  <span class="hljs-comment">//3123</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr.<span class="hljs-property">length</span>);  <span class="hljs-comment">//3</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html">	// unshift函数的测试<br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">unshift</span>(<span class="hljs-number">10</span>,<span class="hljs-number">15</span>,<span class="hljs-number">454</span>,<span class="hljs-number">454</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);  <span class="hljs-comment">//8</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);  <span class="hljs-comment">//10,15,454,454,23,1231,213,3123</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html">  //shift函数的测试<br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">shift</span>();</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);  <span class="hljs-comment">//23</span></span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);  <span class="hljs-comment">//1231,213,3123</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><span class="hljs-comment">//reverse()函数的测试</span><br>&lt;script&gt;<br>       <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];<br>       <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-built_in">reverse</span>();<br>       <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(tmp);  <span class="hljs-comment">//3123,213,1231,23</span><br>       <span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(arr);  <span class="hljs-comment">//3123,213,1231,23</span><br>  &lt;/script&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> arr22 = [<span class="hljs-number">23</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">213</span>,<span class="hljs-number">3123</span>];</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">concat</span>(arr22);</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="5-2-1-slice-sart-end"><a href="#5-2-1-slice-sart-end" class="headerlink" title="5.2.1 slice(sart,[end])"></a>5.2.1 <strong>slice(sart,[end])</strong></h5><p>可以从一个数组中截取指定的元素<br>该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回<br>参数：  </p>
<ol>
<li>截取开始位置的索引（包括开始位置） </li>
<li>截取结束位置的索引（不包括结束位置）<br>    第二个参数可以省略不写，如果不写则一直截取到最后<br>      参数可以传递一个负值，如果是负值，则从后往前数</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">123</span>,<span class="hljs-number">2131</span>,<span class="hljs-number">231</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">131</span>];</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">slice</span>(<span class="hljs-number">3</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//3123,3123,131</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<span class="hljs-comment">//123,2131,231,3123,3123,131</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">123</span>,<span class="hljs-number">2131</span>,<span class="hljs-number">231</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">131</span>];</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">slice</span>(<span class="hljs-number">3</span>,<span class="hljs-number">4</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);<span class="hljs-comment">//3123</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<span class="hljs-comment">//123,2131,231,3123,3123,131</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="5-2-2-splice"><a href="#5-2-2-splice" class="headerlink" title="5.2.2 splice()"></a>5.2.2 <strong>splice()</strong></h5><p>可以用来删除数组中指定元素，并使用新的元素替换<br>   该方法会将删除的元素封装到新数组中返回<br>参数：<br>   1.删除开始位置的索引<br>   2.删除的个数<br>   3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边  </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">123</span>,<span class="hljs-number">2131</span>,<span class="hljs-number">231</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">131</span>];</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">splice</span>(<span class="hljs-number">3</span>,<span class="hljs-number">2</span>,<span class="hljs-number">12313</span>,<span class="hljs-number">123132</span>);</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//3123,3123</span></span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<span class="hljs-comment">//123,2131,231,3,2,12313,123132,131</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="5-3-3-join-splitor"><a href="#5-3-3-join-splitor" class="headerlink" title="5.3.3 join([splitor])"></a>5.3.3 <strong>join([splitor])</strong></h5><p>可以将一个数组转换为一个字符串<br>参数：<br>    需要一个字符串作为参数，这个字符串将会作为连接符来连接数组中的元素<br>    如果不指定连接符则默认使用,</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">123</span>,<span class="hljs-number">2131</span>,<span class="hljs-number">231</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">131</span>];</span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">join</span>(<span class="hljs-string">&quot;&quot;</span>);</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//123213123131233123131</span></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">join</span>(<span class="hljs-string">&quot;-&quot;</span>);</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp); <span class="hljs-comment">//123-2131-231-3123-3123-131</span></span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="5-3-4-sort"><a href="#5-3-4-sort" class="headerlink" title="5.3.4 sort()"></a>5.3.4 <strong>sort()</strong></h5><p>可以对一个数组中的内容进行排序，默认是按照Unicode编码进行排序<br>调用以后，会直接修改原数组。<br>可以自己指定排序的规则，需要一个回调函数作为参数：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;g&quot;</span>, <span class="hljs-string">&quot;f&quot;</span>,<span class="hljs-string">&quot;h&quot;</span>];</span><br><span class="language-javascript">        arr.<span class="hljs-title function_">sort</span>();</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);</span><br><span class="language-javascript">        <span class="hljs-comment">// 0: &quot;a&quot;</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 1: &quot;d&quot;</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 2: &quot;f&quot;</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 3: &quot;g&quot;</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 4: &quot;h&quot;</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们可以自己来指定排序的规则<br>我们可以在sort()添加一个回调函数，来指定排序规则，<br>回调函数中需要定义两个形参,<br>浏览器将会分别使用数组中的元素作为实参去调用回调函数<br>使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边</p>
<ul>
<li>浏览器会根据回调函数的返回值来决定元素的顺序，<br>如果返回一个大于0的值，则元素会交换位置<br>如果返回一个小于0的值，则元素位置不变<br>如果返回一个0，则认为两个元素相等，也不交换位置</li>
<li>如果需要升序排列，则返回 a-b<br>如果需要降序排列，则返回b-a</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">123</span>,<span class="hljs-number">2131</span>,<span class="hljs-number">231</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">131</span>];</span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> tmp = arr.<span class="hljs-title function_">sort</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">a,b</span>)&#123;</span><br><span class="language-javascript">         <span class="hljs-keyword">return</span> a- b;</span><br><span class="language-javascript">      &#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(tmp);</span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);</span><br><span class="language-javascript">      </span><br><span class="language-javascript">     <span class="hljs-comment">// 0: 123</span></span><br><span class="language-javascript">     <span class="hljs-comment">// 1: 131</span></span><br><span class="language-javascript">     <span class="hljs-comment">// 2: 231</span></span><br><span class="language-javascript">     <span class="hljs-comment">// 3: 2131</span></span><br><span class="language-javascript">     <span class="hljs-comment">// 4: 3123</span></span><br><span class="language-javascript">     <span class="hljs-comment">// 5: 3123</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="5-3遍历数组"><a href="#5-3遍历数组" class="headerlink" title="5.3遍历数组"></a>5.3<strong>遍历数组</strong></h4><p>遍历数组就是将数组中元素都获取到<br>一般情况我们都是使用for循环来遍历数组</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html">for(var i=0 ; i&lt;数组.length ; i++)&#123;  <br>    //数组[i]  <br>&#125;<br></code></pre></td></tr></table></figure>

<p>使用forEach()方法来遍历数组<strong>（不兼容IE8）</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html">数组.forEach(function(value , index , obj)&#123;  <br>  <br>&#125;);<br></code></pre></td></tr></table></figure>

<p>forEach()方法需要一个回调函数作为参数，<br>数组中有几个元素，回调函数就会被调用几次，<br>每次调用时，都会将遍历到的信息以实参的形式传递进来，<br>我们可以定义形参来获取这些信息。<br>value:正在遍历的元素<br>index:正在遍历元素的索引<br>obj:被遍历对象</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">     <span class="hljs-keyword">var</span> arr = [[<span class="hljs-number">231</span>,<span class="hljs-number">1231</span>,<span class="hljs-number">3</span>,<span class="hljs-number">312</span>,<span class="hljs-number">3</span>,<span class="hljs-number">13</span>],[<span class="hljs-number">1313213</span>,<span class="hljs-number">13123</span>,<span class="hljs-number">1321312</span>],<span class="hljs-number">2</span>,<span class="hljs-number">31</span>,<span class="hljs-number">3123</span>,<span class="hljs-number">1</span>];</span><br><span class="language-javascript">     arr.<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">value,index,arr</span>)&#123;</span><br><span class="language-javascript">         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);</span><br><span class="language-javascript">         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(index);</span><br><span class="language-javascript">         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);</span><br><span class="language-javascript">     &#125;);</span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>call()<br>apply()<br><strong>这两个方法都是函数对象的方法需要通过函数对象来调用</strong><br>通过两个方法可以直接调用函数，并且<strong>可以通过第一个实参来指定函数中this</strong><br>不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> func = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">    &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">0</span>]);<span class="hljs-comment">//231</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">1</span>]);<span class="hljs-comment">//231</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">2</span>]);<span class="hljs-comment">//4142</span></span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-title function_">func</span>(<span class="hljs-number">231</span>,<span class="hljs-number">231</span>,<span class="hljs-number">4142</span>);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> func = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">    &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> obj =&#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;小红&quot;</span>&#125;;</span><br><span class="language-javascript">    func.<span class="hljs-title function_">apply</span>(obj);<span class="hljs-comment">//小红</span></span><br><span class="language-javascript">    <span class="hljs-comment">// func.call(obj);//小红</span></span><br><span class="language-javascript">    <span class="hljs-title function_">func</span>(obj);<span class="hljs-comment">//&quot;&quot;</span></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span> (x, y) </span><br><span class="language-javascript">&#123; </span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span> (x + y);</span><br><span class="language-javascript">&#125; </span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">minus</span> (x, y) </span><br><span class="language-javascript">&#123; </span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span> (x - y); </span><br><span class="language-javascript">&#125; </span><br><span class="language-javascript">add.<span class="hljs-property">call</span> (minus , <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);    <span class="hljs-comment">//2</span></span><br><span class="language-javascript"><span class="hljs-comment">//这个例子中的意思就是用 add 来替换 minus ，add.call(minus ,1,1) == add(1,1) ，所以运行结果为：console.log (2); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。</span></span><br><span class="language-javascript"><span class="hljs-comment">//A.call( B,x,y )：就是把A的函数放到B中运行，x 和 y 是A方法的参数。</span></span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>arguments</strong><br>arguments和this类似，都是函数中的隐含的参数<br>arguments是一个类数组元素，它用来封装函数执行过程中的实参<br>所以即使不定义形参，也可以通过arguments来使用实参<br><strong>arguments中有一个属性callee表示当前执行的函数对象</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">var</span> func = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span><br><span class="language-javascript">    &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">0</span>]);<span class="hljs-comment">//231</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">1</span>]);<span class="hljs-comment">//231</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">2</span>]);<span class="hljs-comment">//4142</span></span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-title function_">func</span>(<span class="hljs-number">231</span>,<span class="hljs-number">231</span>,<span class="hljs-number">4142</span>);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>练习1：数组去重</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">23</span>,<span class="hljs-number">434</span>,<span class="hljs-number">5</span>, <span class="hljs-number">5</span>, <span class="hljs-number">4</span>]</span><br><span class="language-javascript">       <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; arr.<span class="hljs-property">length</span>; i++) &#123;</span><br><span class="language-javascript">           <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = i + <span class="hljs-number">1</span>; j &lt; arr.<span class="hljs-property">length</span>; j++) &#123;</span><br><span class="language-javascript">               <span class="hljs-keyword">if</span> (arr[i] == arr[j]) &#123;</span><br><span class="language-javascript">                   arr.<span class="hljs-title function_">splice</span>(j, <span class="hljs-number">1</span>)</span><br><span class="language-javascript">                   j--;</span><br><span class="language-javascript">               &#125;       </span><br><span class="language-javascript">           &#125;</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;first&quot;</span>, arr) <span class="hljs-comment">//first [ 1, 3, 4, 23, 434, 5 ]</span></span><br><span class="language-javascript">      </span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <br><br>   <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">32</span>,<span class="hljs-number">2</span>,<span class="hljs-number">23</span>,<span class="hljs-number">32</span>,<span class="hljs-number">43</span>,<span class="hljs-number">5</span>,<span class="hljs-number">23</span>,<span class="hljs-number">23</span>];</span><br><span class="language-javascript">       <span class="hljs-keyword">var</span> output = [];</span><br><span class="language-javascript">       <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; arr.<span class="hljs-property">length</span>;i++)</span><br><span class="language-javascript">       &#123;</span><br><span class="language-javascript">           <span class="hljs-keyword">var</span> flag = <span class="hljs-literal">true</span>;</span><br><span class="language-javascript">           <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j = <span class="hljs-number">0</span>; j &lt; output.<span class="hljs-property">length</span>; j++)&#123;</span><br><span class="language-javascript">              <span class="hljs-keyword">if</span>(arr[i]==arr[j])</span><br><span class="language-javascript">              &#123;</span><br><span class="language-javascript">                  flag=<span class="hljs-literal">false</span>;</span><br><span class="language-javascript">              &#125;</span><br><span class="language-javascript">           &#125;</span><br><span class="language-javascript">           <span class="hljs-keyword">if</span>(flag)</span><br><span class="language-javascript">           &#123;</span><br><span class="language-javascript">               output.<span class="hljs-title function_">push</span>(arr[i]);</span><br><span class="language-javascript">           &#125;</span><br><span class="language-javascript">       &#125;</span><br><span class="language-javascript">       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(output);<span class="hljs-comment">//[ 1, 2, 32, 23, 43, 5 ]</span></span><br><span class="language-javascript">   </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
              </div>
              <p class="note note-warning">
                <strong>本文作者: </strong><a href="/HexoPage/">xiao_aodi</a> <br>
                <!-- <strong>本文链接: </strong><a href="http://xiao_aodi.gitee.io/hexopage/2022/03/18/js%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%E7%9A%84%E7%AC%94%E8%AE%B0/">http://xiao_aodi.gitee.io/hexopage/2022/03/18/js%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%E7%9A%84%E7%AC%94%E8%AE%B0/</a> <br> -->
                <strong>版权声明: </strong>本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                   </p>
                   

              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/HexoPage/2022/03/19/js%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript学习笔记（第三部分）总共四部分</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/HexoPage/2022/03/17/js%E7%AC%AC%E4%B8%80%E9%83%A8%E5%88%86%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">JavaScript学习笔记（第一部分）总共四部分</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  
   <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>  
  <!-- 添加网站运行时间 -->
  <div class="footer-content">
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script>
      var now = new Date();
      function createtime(){
          var grt= new Date("03/10/2022 00:00:00");//此处修改你的建站时间或者网站上线时间
          now.setTime(now.getTime()+250);
          days = (now - grt ) / 1000 / 60 / 60 / 24;
          dnum = Math.floor(days);
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
          hnum = Math.floor(hours);
          if(String(hnum).length ==1 ){
              hnum = "0" + hnum;
          }
          minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
          mnum = Math.floor(minutes);
          if(String(mnum).length ==1 ){
                    mnum = "0" + mnum;
          }
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
          snum = Math.round(seconds);
          if(String(snum).length ==1 ){
                    snum = "0" + snum;
          }
          document.getElementById("timeDate").innerHTML = "🚀 &nbsp"+dnum+"&nbsp天";  //此次自定义显示内容
          document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
      }  //此次自定义显示内容
      setInterval("createtime()",250);
      </script>
    </div>
  </div>
  <!-- 统计访问量信息 -->
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  <!-- 个人和备案信息 -->
  <div>©2022-2023<a target="_blank" rel="noopener" href="https://clearlight.blog.csdn.net/">ClearlightY</a> <a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">冀ICP备19019307号-2</a></div>
   
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/HexoPage/img/police_beian.png" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>




  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>


</body>
</html>
